<template>
  <div class="box">
    <div class="login">
      <div class="box-left">
        <img class="logo" src="../assets/logo.webp" alt="" />
        <p class="myname">锤锤公主</p>
      </div>
      <div class="box-right">
        <el-form>
          <p>系统登录</p>
          <el-form-item label="用户名" label-width="80px" required>
            <el-input
              v-model="username"
              placeholder="4-9位用户名,首位字母"
              @input="namefn"
            />
            <span>{{ nameval }}</span>
          </el-form-item>

          <el-form-item label="密码" label-width="80px" required>
            <el-input
              v-model="userpass"
              type="password"
              required
              placeholder="6-9位字符(数字，字母，下划线)"
              @input="passfn"
              @keyup.enter="change"
            ></el-input>
            <span>{{ passval }}</span>
          </el-form-item>

          <el-button @click="change">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup lang='ts'>
import service from "../utils/service"; //引入拦截器
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import "element-plus/dist/index.css";
import { ElLoading } from "element-plus";
let loading: any;

const username = ref("");
const userpass = ref("");
const $router = useRouter();
var reg = /^[a-zA-Z][a-zA-Z0-9_]{4,9}$/;
var reg1 = /^[a-zA-Z0-9_]{6,9}$/;

const nameval = ref<string>("");
const passval = ref<any>();
const change = () => {
  service({
    url: "/admin/login",
    method: "post",
    data: {
      adminname: username.value,
      password: userpass.value,
    },
  }).then((res: any) => {
    if (res.data.code === "200") {
      ElMessage({
        message: "亲，恭喜您，登录成功",
        type: "success",
      });
      sessionStorage.setItem("username", username.value);
      sessionStorage.setItem("token", res.data.data.token);
      //存储当前用户权限  prefix-icon="el-icon-lock"  prefix-icon="el-icon-user-solid"
      sessionStorage.setItem(
        "grants",
        JSON.stringify(res.data.data.checkedkeys)
      );
      $router.push("/home/shouye");
    } else if (res.data.code === "10003") {
      ElMessage({
        message: "密码错误",
        type: "error",
      });
      loading.close();
    } else if (res.data.code === "10005") {
      ElMessage({
        message: "未注册",
        type: "error",
      });
      loading.close();
    } else if (!username.value || !userpass.value) {
      ElMessage({
        message: "填写内容哦",
        type: "error",
      });
      loading.close();
    }
  });
};
const namefn = () => {
  if (reg.test(username.value)) {
    nameval.value = "";
  } else {
    nameval.value = "用户名格式错误";
  }
};
const passfn = () => {
  if (reg1.test(userpass.value)) {
    passval.value = "";
  } else {
    passval.value = "密码格式错误";
  }
};
</script>

<style scoped>
.el-form {
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  padding-right: 20px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  overflow: hidden;
}
p {
  text-align: center;
  font-size: 20px;
  margin: 20px 0;
}
.myname {
  position: fixed;
  top: 60px;
  left: 60px;
}
.box {
  background-image: url("https://img0.baidu.com/it/u=1292369528,3266513592&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=237");
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}
.login {
  width: 500px;
  height: 300px;
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0px 0px 5px #807b8b;
  border-radius: 10px;
  box-sizing: border-box;
}
.box-left {
  height: 100%;
  width: 200px;
  background: #8d8c8c;
  opacity: 0.7;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  line-height: 200px;
  text-align: center;
}
.box-right {
  height: 100%;
  width: 300px;
}
.el-button {
  width: 80px;
  margin-left: 50%;
  transform: translateX(-30px);
  background-color: rgb(174, 178, 178);
}
span {
  font-size: 13px;
  color: red;
  width: 100px;
  height: 20px;
  display: block;
}
.logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  vertical-align: middle;
}
</style>